<!--车辆管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆管理</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="add_button">新建车辆</el-button>
  </div>
  <!-- 新增车辆弹窗 -->
  <el-dialog :title="dialogTitle"
             v-model="dialogVisible"
             style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆品牌">
            <el-input v-model="save_vehicle_form.brand" placeholder="请输入汽车品牌"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆牌号">
            <el-input v-model="save_vehicle_form.license" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆型号">
            <el-input v-model="save_vehicle_form.model" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆识别码">
            <el-input v-model="save_vehicle_form.code" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车辆排量">
            <el-select placeholder="请选择" v-model="save_vehicle_form.displacement">
              <el-option label="1.6" value="1"></el-option>
              <el-option label="2.5" value="2"></el-option>
              <el-option label="4" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆类型">
            <el-select placeholder="请选择" v-model="save_vehicle_form.type">
              <el-option v-for="item in vehicle_type_arr" :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="轿车" value="10"></el-option>
              <el-option label="货车" value="20"></el-option>
              <el-option label="客车" value="30"></el-option>
              <el-option label="挂车" value="40"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车身颜色">
            <el-select placeholder="请选择" v-model="save_vehicle_form.color">
              <el-option v-for="item in vehicle_color_arr" :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="黑" value="10"></el-option>
              <el-option label="白" value="20"></el-option>
              <el-option label="蓝" value="30"></el-option>
              <el-option label="灰" value="40"></el-option>
              <el-option label="银" value="50"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程数">
            <el-input v-model="save_vehicle_form.kilometers" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker v-model="save_vehicle_form.buyTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="validate_date"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上牌时间">
            <el-date-picker v-model="save_vehicle_form.regTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="validate_date"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="购买价格">
            <el-input v-model="save_vehicle_form.price" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电池类型">
            <el-select placeholder="请选择" v-model="save_vehicle_form.batteryType">
              <el-option v-for="item in battery_type_arr" :label="item.label" :value="item.value"></el-option>
<!--              <el-option label="铅酸蓄电池" value="10"></el-option>
              <el-option label="镍氢电池" value="20"></el-option>
              <el-option label="钠硫电池" value="30"></el-option>
              <el-option label="二次锂电池" value="40"></el-option>
              <el-option label="空气电池" value="50"></el-option>
              <el-option label="三元锂电池" value="60"></el-option>
              <el-option label="碱性燃料电池" value="70"></el-option>-->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="save_vehicle">确定</el-button>
    </template>
  </el-dialog>
  <!-- 车辆搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车辆品牌">
        <el-input v-model="searchVehicleForm.brand" placeholder="请输入内容" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" style="width:290px;">
        <el-input v-model="searchVehicleForm.licence" placeholder="请输入内容" style="width:220px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset_search">重置</el-button>
        <el-button @click="load_vehicle" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="vehicleArr" height="580px">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="brand" label="车辆品牌" align="center"/>
      <el-table-column prop="license" label="车牌号" align="center"/>
      <el-table-column prop="code" label="车辆识别码" align="center"/>
      <el-table-column prop="type" label="车辆类型" align="center" :formatter="vehicle_type_formatter"/>
      <el-table-column prop="price" label="购买价格" align="center"/>
      <el-table-column prop="buyTime" label="购买时间" align="center"/>
      <el-table-column prop="regTime" label="上牌时间" align="center"/>
      <el-table-column prop="batteryType" label="电池类型" align="center" :formatter="battery_type_formatter"/>
      <el-table-column prop="status" label="车辆状态" align="center" :formatter="vehicle_status_formatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit_vehicle(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delete_vehicle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "axios";

//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增车辆');

/*车辆查询条件*/
const searchVehicleForm = ref({brand:'',licence:''})
/*车辆数组*/
const vehicleArr = ref([])
/*车辆类型选项数组*/
const vehicle_type_arr = ref([])
const battery_type_arr = ref([])
const vehicle_color_arr = ref([])
onMounted(()=>{
  loadDictOption(vehicle_type_arr,'vehicle_type')
  loadDictOption(battery_type_arr,'battery_type')
  loadDictOption(vehicle_color_arr,'vehicle_color')

})
/*将数字转换为用户理解的文字*/
const vehicle_status_formatter = (row,column,cellValue,index)=>{
  if(cellValue ==='1'){
    cellValue ='空闲'
  }else if(cellValue==='2'){
    cellValue ='占用'
  }
  return cellValue
}
const battery_type_formatter =(row,column,cellValue,index)=>{
  if(!battery_type_arr.value){
    return cellValue
  }
  for(let item of battery_type_arr.value){
    if(item.value===cellValue){
      cellValue=item.label
    }
  }
  /*if(cellValue ==='10'){
    cellValue ='铅酸蓄电池'
  }else if(cellValue ==='20'){
    cellValue ='镍氢电池'
  }else if(cellValue ==='30'){
    cellValue ='钠硫电池'
  }else if(cellValue ==='40'){
    cellValue ='二次锂电池'
  }else if(cellValue ==='50'){
    cellValue ='空气电池'
  }else if(cellValue ==='60'){
    cellValue ='三元锂电池'
  }else if(cellValue ==='70'){
    cellValue ='碱性燃料电池'
  }*/
  return cellValue
}
const vehicle_type_formatter =(row,column,cellValue,index)=> {
  if(!vehicle_type_arr.value){
    return cellValue
  }
  for(let item of vehicle_type_arr.value){
    if(cellValue===item.value){
      cellValue=item.label
    }
  }
  /*if(cellValue==='10'){
    cellValue='轿车'
  }else if(cellValue==='20'){
    cellValue='客车'
  }else if(cellValue==='30'){
    cellValue='货车'
  }else if(cellValue==='40'){
    cellValue='挂车'
  }*/
  return cellValue
}
/*添加按钮*/
const add_button = ()=>{
  dialogVisible.value=true
  dialogTitle.value='新增车辆'
}
/*dialogVisible表单数据*/
const save_vehicle_form = ref({
  brand:'',
  licence:'',
  model:'',
  code:'',
  displacement:'',
  type:'',
  color:'',
  kilometers:'',
  buyTime:'',
  regTime:'',
  price:'',
  batteryType:''
})
/*关闭dialogVisible对话框表单*/
const handleClose = ()=>{
  if(confirm('确认关闭吗？')){
    dialogVisible.value=false
    save_vehicle_form.value={}
  }
}
/*保存车辆*/
const save_vehicle =()=>{
  let data = qs.stringify(save_vehicle_form.value)
  axios.post(BASE_URL+'/v1/vehicle/save',data)
      .then((response)=>{
        if(response.data.code===2000){
          ElMessage.success('保存成功')
          vehicleArr.value=response.data.data
          //清空表单数据
          save_vehicle_form.value={}
          dialogVisible.value=false
          load_vehicle()
        }else{
          //数据库中code和license设置了唯一性约束
          ElMessage.error('车辆识别码与车牌号不允许重复')
        }
      })
}
/*加载车辆*/
const load_vehicle = ()=>{
  let data = qs.stringify(searchVehicleForm.value)
  axios.get(BASE_URL+'/v1/vehicle/select?'+data)
      .then((response)=>{
        if(response.data.code===2000){
          vehicleArr.value=response.data.data
        }else{
          ElMessage.error(response.data.msg)
        }
      })
}
/*重置搜索*/
const reset_search = ()=>{
  searchVehicleForm.value={}
  load_vehicle()
}
//校验时间
const validate_date =()=>{
  const buyTime = save_vehicle_form.value.buyTime;
  const regTime = save_vehicle_form.value.regTime;
  if(buyTime && regTime && new Date(buyTime) > new Date(regTime)){
    ElMessage.error('购买时间不能早于上牌时间')
    save_vehicle_form.value.regTime=''
  }
}

const edit_vehicle = (row)=>{
  dialogVisible.value=true
  dialogTitle.value='编辑车辆'
  save_vehicle_form.value=row


}
/*根据id删除车辆*/
const delete_vehicle =(id)=>{
  if(confirm('确认删除吗？')){
    axios.post(BASE_URL+'/v1/vehicle/delete/'+id)
        .then((response)=>{
          if(response.data.code===2000){
            ElMessage.success('删除成功')
            load_vehicle()
          }else{
            ElMessage.error(response.data.msg)
          }

        })
  }
}
/*页面加载完毕立即执行*/
onMounted(()=>{

  load_vehicle()
})
</script>